@use '../../variables';
@use '../../../../styles/mixins';

.list-showcase {
    $item-padding: 16px;
    --g-list-item-padding: 0 #{$item-padding};

    padding: 20px 20px 0;

    &__title {
        @include mixins.text-header-2();
        width: 100%;
        border-block-end: 1px solid var(--g-color-line-generic);
    }

    &__subtitle {
        @include mixins.text-body-3();
        width: 100%;
        margin-block-end: 5px;
        margin-inline-start: $item-padding;
        color: var(--g-color-text-secondary);
    }

    &__main-container {
        display: inline-flex;
        flex-direction: column;
        width: 100%;
    }

    &__settings-container {
        display: inline-flex;
        flex-direction: column;
    }

    &__row {
        display: flex;
        flex-wrap: wrap;
        margin: 10px 0;
    }

    &__sample {
        width: 200px;
        margin-block-end: 40px;

        &:not(:last-child) {
            margin-inline-end: 20px;
        }
    }

    &__list-wrap {
        margin-block-start: 10px;
        padding: 10px 0 0;
        border: 1px solid var(--g-color-line-generic);
        border-radius: 3px;
    }

    &__group {
        @include mixins.text-accent;
        color: var(--g-color-text-secondary);
    }

    &__select {
        $button: '.#{variables.$ns}button';
        box-sizing: border-box;
        display: flex;
        align-items: center;
        width: 100%;
        height: 100%;
        padding-inline-start: 10px;

        #{$button} {
            display: none;
            margin-inline-start: auto;
        }
        &:hover {
            #{$button} {
                display: block;
            }
        }
    }

    &__select-text {
        overflow: hidden;
        text-overflow: ellipsis;
        flex: 1 1 auto;
    }
}
